//重点指标实时监控
/* eslint-disable */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs, Radio, Select, Button, message, DatePicker, Collapse, Checkbox, Row, Col, Divider, Icon, Drawer, Popconfirm } from 'antd';
import styles from './Scyxhz_Qnhb.less';
import MyTable from '../../../components/common/MyTable';
import update from 'immutability-helper';
import request from '../../../utils//request';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
import Container from '../../../components/common/Container';
import PublicService from "../../../services/PublicService";
import MyPagination from '../../../components/common/MyPagination';
import Echarts_ONE from '../echarts/Echarts_ONE';
import Echarts_left1 from '../echarts/Echarts_left1';
import Echarts_left2 from '../echarts/Echarts_left2';
import Echarts_left3 from '../echarts/Echarts_left3';
import Echarts_left4 from '../echarts/Echarts_left4';
import Echarts_left5 from '../echarts/Echarts_left5';
import Echarts_left6 from '../echarts/Echarts_left6';
import Filtrate from '../../../components/common/Filtrate';
const { MonthPicker, RangePicker } = DatePicker;
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Option } = Select;
const EchartsData = [
    {
        title: '总负荷率',
        connect: <Echarts_left1 />
    },
    {
        title: '当日垃圾进厂量/发电量',
        connect: <Echarts_left2 />
    }, {
        title: '环保指标排放',
        connect: <Echarts_left3 />
    }
]

const EchartsData2 = [
    {
        title: '生产计划完成情况',
        connect: <Echarts_left4 />
    },
    {
        title: '生产效率分析',
        connect: <Echarts_left5 />
    }, {
        title: '环保数据总览',
        connect: <Echarts_left6 />
    }
]
class Scyxhz_Qnhb extends Component {
    constructor(props) {
        super(props);
        this.state = {
            electricity: '',
            enterFurnace: '',
            fdl: '',
            grz: '',
            heatingLoad: '',
            onGridEnergy: '',
            rubbish: '',
            rubbish_jc: '',
            rubbish_rl: '',
            swdl: '',

            caoh2_day: '',
            caoh2_month: '',
            caoh2_year: '',
            charcoal_day: '',
            charcoal_month: '',
            charcoal_year: '',
            chelate_day: '',
            chelate_month: '',
            chelate_year: '',
            electricity_day: '',
            electricity_month: '',
            electricity_year: '',
            enterFurnace_day: '',
            enterFurnace_month: '',
            enterFurnace_year: '',
            fuelOil_day: '',
            fuelOil_month: '',
            fuelOil_year: '',
            onGridEnergy_day: '',
            onGridEnergy_month: '',
            onGridEnergy_year: '',
            rubbish_day: '',
            rubbish_month: '',
            rubbish_year: '',
            synthesize_day: '',
            synthesize_month: '',
            synthesize_year: '',
            water_day: '',
            water_month: '',
            water_year: '',


        }



    }
    componentDidMount() {
        this.theProgressOfTheOverview()
        this.findDataBoard()

    }

    theProgressOfTheOverview = () => {
        const { electricity, enterFurnace, fdl, grz, heatingLoad, onGridEnergy, rubbish, rubbish_jc, rubbish_rl, swdl } = this.state
        request({
            url: `/sx-client/sx/indicator/theProgressOfTheOverview`,
            method: 'GET',
        }).then(data => {
            if (data.rc === 0) {
                const { electricity, enterFurnace, fdl, grz, heatingLoad, onGridEnergy, rubbish, rubbish_jc, rubbish_rl, swdl } = data.ret
                this.setState({
                    electricity, enterFurnace, fdl, grz, heatingLoad, onGridEnergy, rubbish, rubbish_jc, rubbish_rl, swdl
                })
            }
        })

    }

    findDataBoard = () => {
        const {
            caoh2_day, caoh2_month, caoh2_year, charcoal_day, charcoal_month,
            charcoal_year, chelate_day, chelate_month, chelate_year, electricity_day,
            electricity_month, electricity_year, enterFurnace_day, enterFurnace_month, enterFurnace_year,
            fuelOil_day, fuelOil_month, fuelOil_year, onGridEnergy_day, onGridEnergy_month,
            onGridEnergy_year, rubbish_day, rubbish_month, rubbish_year, synthesize_day,
            synthesize_month, synthesize_year, water_day, water_month, water_year } = this.state


        request({
            url: `/sx-client/sx/indicator/findDataBoard`,
            method: 'GET',
        }).then(data => {
            if (data.rc === 0) {
                const {
                    caoh2_day, caoh2_month, caoh2_year, charcoal_day, charcoal_month,
                    charcoal_year, chelate_day, chelate_month, chelate_year, electricity_day,
                    electricity_month, electricity_year, enterFurnace_day, enterFurnace_month, enterFurnace_year,
                    fuelOil_day, fuelOil_month, fuelOil_year, onGridEnergy_day, onGridEnergy_month,
                    onGridEnergy_year, rubbish_day, rubbish_month, rubbish_year, synthesize_day,
                    synthesize_month, synthesize_year, water_day, water_month, water_year } = data.ret
                this.setState({
                    caoh2_day, caoh2_month, caoh2_year, charcoal_day, charcoal_month,
                    charcoal_year, chelate_day, chelate_month, chelate_year, electricity_day,
                    electricity_month, electricity_year, enterFurnace_day, enterFurnace_month, enterFurnace_year,
                    fuelOil_day, fuelOil_month, fuelOil_year, onGridEnergy_day, onGridEnergy_month,
                    onGridEnergy_year, rubbish_day, rubbish_month, rubbish_year, synthesize_day,
                    synthesize_month, synthesize_year, water_day, water_month, water_year
                })
            }
        })
    }



    render() {
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '35vh';
        let tableHeight = 330;
        if (width > 1367) {
            tableHeight = 630;
            containerHeight = '40vh';
        }

        const {
            caoh2_day, caoh2_month, caoh2_year, charcoal_day, charcoal_month,
            charcoal_year, chelate_day, chelate_month, chelate_year, electricity_day,
            electricity_month, electricity_year, enterFurnace_day, enterFurnace_month, enterFurnace_year,
            fuelOil_day, fuelOil_month, fuelOil_year, onGridEnergy_day, onGridEnergy_month,
            onGridEnergy_year, rubbish_day, rubbish_month, rubbish_year, synthesize_day,
            synthesize_month, synthesize_year, water_day, water_month, water_year } = this.state

        const { electricity, enterFurnace, fdl, grz, heatingLoad, onGridEnergy, rubbish, rubbish_jc, rubbish_rl, swdl } = this.state

        return (

            <div className={styles.warp}>

                <Tabs defaultActiveKey="2" className={styles.Tabs}>
                    <TabPane tab="总览视图" key="1">
                        <Container
                            style={{ height: containerHeight, position: "relative", marginBottom: 10 }}
                            header={true}
                        >
                            <div className={styles.connecBox} style={{ height: containerHeight }}>
                                <div className={styles.title}>
                                    <div style={{ display: 'flex', alignItems: 'center' }}><span className={styles.ciler}></span> 生产实时</div>
                                </div>
                                <div className={styles.connecBox_bottom}>
                                    {
                                        EchartsData.map((item) => {
                                            return (
                                                <div className={styles.connecBox_bottom_box}>
                                                    <div className={styles.connecBox_connec}>
                                                        {item.connect}
                                                    </div>
                                                    <div>{item.title}</div>

                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>

                        </Container>

                        <Container
                            style={{ height: containerHeight, position: "relative" }}
                            header={true}
                        >
                            <div className={styles.connecBox} style={{ height: containerHeight }}>
                                <div className={styles.title}>
                                    <div style={{ display: 'flex', alignItems: 'center' }}><span className={styles.ciler}></span> 月度统计</div>
                                </div>
                                <div className={styles.connecBox_bottom}>
                                    {
                                        EchartsData2.map((item) => {
                                            return (
                                                <div className={styles.connecBox_bottom_box}>
                                                    <div className={styles.connecBox_connec}>
                                                        {item.connect}
                                                    </div>
                                                    <div>{item.title}</div>

                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>

                        </Container>

                    </TabPane>
                    <TabPane tab="数据看板" key="2">
                        <div className={styles.sjkb}>

                            <div className={styles.sjkb_1}>
                                <div className={styles.title}>
                                    <div style={{ display: 'flex', alignItems: 'center' }}><span className={styles.ciler}></span> 月度进度总览</div>
                                </div>
                                <div className={styles.sjkb_1_box}>
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>垃圾进厂量</div>
                                        <div className={styles.unit}>{rubbish}/{rubbish_jc}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>垃圾焚烧量</div>
                                        <div className={styles.unit}>{enterFurnace}/{rubbish_rl}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>发电量</div>
                                        <div className={styles.unit}>{electricity}/{fdl}</div>
                                        <div className={styles.unit}>KWh</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>上网电量</div>
                                        <div className={styles.unit}>{onGridEnergy}/{swdl}</div>
                                        <div className={styles.unit}>KWh</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>供热量</div>
                                        <div className={styles.unit}>{heatingLoad}/{grz}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                </div>
                            </div>


                            <div className={styles.sjkb_1}>
                                <div className={styles.title}>
                                    <div style={{ display: 'flex', alignItems: 'center' }}><span className={styles.ciler}></span> 垃圾处置总览</div>
                                </div>
                                <div className={styles.sjkb_1_box}>
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>昨日进厂量</div>
                                        <div className={styles.unit}>{rubbish_day}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>昨日焚烧量</div>
                                        <div className={styles.unit}>{enterFurnace_day}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>当月累计进厂量</div>
                                        <div className={styles.unit}>{rubbish_month}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>当月累计焚烧量</div>
                                        <div className={styles.unit}>{enterFurnace_month}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>当年累计进厂量</div>
                                        <div className={styles.unit}>{rubbish_year}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>当年累计焚烧量</div>
                                        <div className={styles.unit}>{enterFurnace_year}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                </div>
                            </div>

                            <div className={styles.sjkb_1}>
                                <div className={styles.title}>
                                    <div style={{ display: 'flex', alignItems: 'center' }}><span className={styles.ciler}></span> 生产运行总览</div>
                                </div>
                                <div className={styles.sjkb_1_box}>
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>昨日发电量</div>
                                        <div className={styles.unit}>{electricity_day}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>昨日上网电量</div>
                                        <div className={styles.unit}>{onGridEnergy_day}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>当月累计发电量</div>
                                        <div className={styles.unit}>{electricity_month}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>单月累计上网电量</div>
                                        <div className={styles.unit}>{onGridEnergy_month}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>当年累计发电量</div>
                                        <div className={styles.unit}>{electricity_year}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                    <Divider type="vertical" dashed={true} style={{ height: '80%' }} />
                                    <div className={styles.sjkb_1_box_connect}>
                                        <div className={styles.sj_title}>当年累计上网电量</div>
                                        <div className={styles.unit}>{onGridEnergy_year}</div>
                                        <div className={styles.unit}>t</div>
                                    </div>
                                </div>
                            </div>

                            <div className={styles.sjkb_2}>
                                <div className={styles.sjkb_2_box}>
                                    <div className={styles.title}>
                                        <div style={{ display: 'flex', alignItems: 'center' }}><span className={styles.ciler}></span> 资源消耗总览</div>
                                    </div>
                                    <div className={styles.sjkb_2_box_warp}>
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>燃油昨日耗量</div>
                                            <div className={styles.unit}>{fuelOil_day}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true} />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>燃油当月耗量</div>
                                            <div className={styles.unit}>{fuelOil_month}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true} />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>燃油当年耗量</div>
                                            <div className={styles.unit}>{fuelOil_year}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true} />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>水昨日耗量</div>
                                            <div className={styles.unit}>{water_day}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true} />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>水当月耗量</div>
                                            <div className={styles.unit}>{water_month}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true} />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>水当年耗量</div>
                                            <div className={styles.unit}>{water_year}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true} />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>电昨日耗量</div>
                                            <div className={styles.unit}>{synthesize_day}KWh</div>

                                        </div>
                                        <Divider type="vertical" dashed={true} />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>电当月耗量</div>
                                            <div className={styles.unit}>{synthesize_month}KWh</div>

                                        </div>
                                        <Divider type="vertical" dashed={true} />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>电当年耗量</div>
                                            <div className={styles.unit}>{synthesize_year}KWh</div>

                                        </div>
                                        <Divider type="vertical" dashed={true} />
                                    </div>
                                </div>
                                <div style={{ width: 10 }}></div>
                                <div className={styles.sjkb_2_box}>
                                    <div className={styles.title}>
                                        <div style={{ display: 'flex', alignItems: 'center' }}><span className={styles.ciler}></span> 耗材消耗总览</div>
                                    </div>
                                    <div className={styles.sjkb_2_box_warp}>
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>活性炭昨日耗量</div>
                                            <div className={styles.unit}>{charcoal_day}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true}  />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>活性炭当月耗量</div>
                                            <div className={styles.unit}>{charcoal_month}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true}  />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>活性炭当年耗量</div>
                                            <div className={styles.unit}>{charcoal_year}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true}  />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>氢氧化钙昨日耗量</div>
                                            <div className={styles.unit}>{caoh2_day}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true}  />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>氢氧化钙当月耗量</div>
                                            <div className={styles.unit}>{caoh2_month}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true}  />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>氢氧化钙当年耗量</div>
                                            <div className={styles.unit}>{caoh2_year}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true}  />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>蛰合剂昨日耗量</div>
                                            <div className={styles.unit}>{chelate_day}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true}  />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>蛰合剂当月耗量</div>
                                            <div className={styles.unit}>{chelate_month}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true}  />
                                        <div className={styles.sjkb_1_box_connect2}>
                                            <div className={styles.sj_title}>蛰合剂当年耗量</div>
                                            <div className={styles.unit}>{chelate_year}t</div>

                                        </div>
                                        <Divider type="vertical" dashed={true}  />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </TabPane>

                </Tabs>
            </div>
        )
    }


}

export default connect()(Scyxhz_Qnhb)